import React, { useState } from "react";
import { TabBarPropsType, tabBarList } from "./PropsType";
import { useHistory } from "react-router-dom";
import "./index.less";
import classNames from "classnames";
import Icon, { typeProp as typeProps } from "../Icon";
export { tabBarList } from "./PropsType";
export default function TarBar(props: TabBarPropsType) {
  const {
    TabbarList = [],
    barTintColor = "#fff",
    tintColor = "#108ee9",
    badgeClassName = "base-color",
    dotClassName = "base-color",
    unselectedTintColor = "#222",
    hidden = false,
    tabBarPosition = "bottom",
    prefixCls = "m-react",
    index,
    onClick,
  } = props;
  const cls = classNames(
    `m-react-tab-bar ${tabBarPosition === "top" ? "top" : "bottom"}`
  );
  const activeHandel = (id, route) => () => {
    onClick(id, route);
  };
  const [icon, setIcon] = useState(false);
  const IconSelectAction = (id) => () => {
    setIcon(!icon);
  };
  return (
    <div
      className={cls}
      style={{
        backgroundColor: `${barTintColor}`,
        display: `${hidden ? "none" : "flex"}`,
      }}
    >
      {TabbarList.length &&
        TabbarList.map((item) => (
          <div key={item.id} onClick={activeHandel(item.id, item.route)}>
            <div className="tab-bar">
              <div
                className={`tab-bar-item`}
                style={{
                  color: `${
                    index === item.id ? tintColor : unselectedTintColor
                  }`,
                }}
                onClick={item.selectedIcon && IconSelectAction(item.id)}
              >
                {icon && item.selectedIcon && item.id === index ? (
                  <Icon
                    iconName={item.selectedIcon}
                    type={typeProps.icon}
                    size="s"
                  ></Icon>
                ) : (
                  <Icon iconName={item.icon} type={typeProps.icon} size="s" />
                )}

                <span className="text">{item.text}</span>
                {item.badge ? (
                  <div
                    className={`badge ${
                      prefixCls
                        ? `${`${prefixCls}-${badgeClassName}`}`
                        : badgeClassName
                    }`}
                  >
                    {item.badge}
                  </div>
                ) : (
                  item.dot && (
                    <div
                      className={`dot ${
                        prefixCls
                          ? `${`${prefixCls}-${dotClassName}`}`
                          : dotClassName
                      }`}
                    ></div>
                  )
                )}
              </div>
            </div>
          </div>
        ))}
    </div>
  );
}
